<template>
	<div class="top-hp">
		<div class="row-hp">
			<a href="#" title="" class="logo-hp">
				<img :src="img_logo" alt="" />
			</a>
			<div class="top-right-hp">
				<div class="nav-hp">
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
						@select="handleSelect">
						<el-menu-item :index="item.index" v-for="(item, index) in nav_hp"
							@click="click_qiye(item.click, index)">{{ item.titleName }}
						</el-menu-item>

						<el-submenu index="9" class="el-submenu" v-if="title!=='' && title!=null">
							<template slot="title">个人中心</template>
              <el-menu-item index="9-1" @click="login()" v-if="title==='' || title==null">跳转登录</el-menu-item>
								<el-menu-item index="9-1" @click="loginOut()" v-if="title!=='' && title!=null">退出登录</el-menu-item>
								<el-menu-item index="9-2" @click="goIndex()" v-if="title!=='' && title!=null">系统后台</el-menu-item>
						</el-submenu>

					</el-menu>
				</div>
			</div>
			<span class="top-name">{{title}}</span>
		</div>
	</div>
</template>

<script>
import { listSales, getSales, updateClass, addSales, updateSales, getOrgName } from "@/api/project/sales";
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
export default {
	name: "body-hp",
  props:{
    index:{
      default: '0',
      type:String
    }
  },

	data() {
		return {
			activeIndex: '0',
			img_logo: require("../../assets/images/jianshili/hp_logo.png"),
      title: "",
			nav_hp: [
				/* {
					label:"首页",
					name:"first"
				} */
				{
					titleName: "首 页",
					index: "1",
					click: "/hp"
				},
				{
					titleName: "数字化转型",
					index: "2"
				},
				{
					titleName: "服务产品",
					index: "3",
					click:"/fwcpl"
				},
				{
					titleName: "开放合作",
					index: "4",
          click:"/kfhzl"
				},
				{
					titleName: "关于我们",
					index: "5",
					click:"/aboutUs"
				},
				{
					titleName: "企业入口",
					index: "6",
					click: "/eplogin"

				},
				{
					titleName: "机构入口",
					index: "7",
					click: "/agencylogin"
				},
				{
					titleName: "园区入口",
					index: "8",
					click: "/parklogin"
				},
			]
		};
	},
	methods: {

		handleSelect(key, keyPath) {
			// this.activeIndex = key
			// console.log(key,'key=')
		},

		click_qiye(data, e) {
			this.$router.push(data);
			// this.$router.push({name:data, params: { activeIndex: e }})
			// console.log(e)
		},
    loginOut(){
      this.$confirm('确定退出吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/hp';
        })
      }).catch(() => { });
    },
    login(){
      this.$router.push("/eplogin")
    },
    goIndex(){
      this.$router.push("/index")
    },
    getOrgName() {
      if (this.$store.state.user.token !==undefined){
        //删除头部的登录入口
         this.nav_hp.splice(5,3)
        //获取当前登录人员的企业名称和用户昵称
        getOrgName(this.queryParams).then(response => {
          const userId = this.$store.state.user.info.deptId
          if (response.msg == null) {//代表当前登录用户是挂在部门
            getDept(userId).then(responseNew => {
              this.title = responseNew.data.createBy + "-" + responseNew.data.parentName + "-" + responseNew.data.deptName + "-" + this.$store.state.user.info.nickName;
            });
          } else {
            this.title = response.msg + "-" + this.$store.state.user.info.nickName
          }
        });
      }
    },

	},
	created() {
		// console.log(this.$route.path,'activeIndex')
		//获取路由路径
		let data = this.$route.path
		//判断页面
		if (data == "/eplogin") {
			this.activeIndex = '6'
		} else if (data == "/agencylogin") {
			this.activeIndex = '7'
		} else if (data == "/parklogin") {
			this.activeIndex = '8'
		} else if (data == "/hp") {
			this.activeIndex = '1'
		} else if (data == "/servicelist"){
			this.activeIndex = '1'
		}else if (data == "/platformlist") {
			this.activeIndex = '1'
		}else if (data == "/fwcpl") {
			this.activeIndex = '3'
		}else if (data==='/fwcpd'){
      this.activeIndex = '3'
    }
    else if (data==='/aboutUs'){
      this.activeIndex = '5'
    }else if (data==='/kfhzl'){
      this.activeIndex = '4'
    }
    else {
			this.activeIndex = '1'
		}
    this.getOrgName();
	},
}
</script>

<style scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,th,
td {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

.el-menu.el-menu--horizontal {
	border-bottom: none;
}

.el-menu--horizontal>.el-menu-item.is-active {
	border-bottom: 3rem solid #33b843;
	color: #33b843 !important;
}

.el-menu--horizontal>.el-menu-item {
	height: 52rem;
	line-height: 52rem;
	font-size: 22rem;
	font-weight: bold;
	color: #262827;
	padding: 0 10rem;
	margin: 0 5rem;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
	color: #33b843;
}

.top-hp {
	height: 96rem;
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	background-color: white;
}

.logo-hp {
	height: 45rem;
	margin-top: 10rem;
}

.logo-hp img {
	height: 100%;
}

.row-hp {
	width: 1532rem;
	margin: auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.top-right-hp {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif;
}

.top-right-hp .btn-hp {
	background: none;
	border: none;
	cursor: pointer;
}

.nav-hp .el-menu-item:nth-child(6) {
	color: #ff9600;
}

.nav-hp .el-menu-item:nth-child(7) {
	color: #ff9600;
}

.nav-hp .el-menu-item:nth-child(8) {
	color: #ff9600;
}

::v-deep .el-submenu .el-submenu__title{
	height: 52rem;
    line-height: 52rem;
    font-size: 22rem;
    font-weight: bold;
    color: #262827;
    padding: 0 2rem;
    margin: 0 2rem;
}
::v-deep .el-submenu .el-submenu__title:hover{color:#33b843;}
::v-deep .el-menu--popup{min-width: 160px;}
.top-name{
	font-size: 14rem;
	width: 260rem;;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	text-align: right;
	}
</style>
